<template>
  <div class="login-container">
    <el-card style="width: 500px">
      <div class="title-container">
        <h3 class="title">登录</h3>
      </div>
      <el-form
        label-width="80px"
        status-icon
        style="width: 400px"
        :model="loginForm"
        :rules="loginRules"
        ref="loginFromRef"
      >
        <el-form-item label="账号" prop="userName">
          <el-input
            type="text"
            placeholder="请输入账号"
            name="userName"
            v-model="loginForm.userName"
          >
            <template #prefix><el-icon><EpUser/></el-icon></template>
          </el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            :type="passwordType"
            name="password"
            placeholder="请输入密码"
            v-model="loginForm.password"
          >
            <template #prefix><el-icon><EpLock/></el-icon></template>
            <template #suffix>
              <el-icon @click="changeShow" class="pointer">
                <EpView v-if="passwordType === 'password'" />
                <EpHide v-else />
              </el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            class="login-btn"
            type="primary"
            @click="goLogin"
            :loading="loading"
            style="width: 100%"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script setup lang="ts">
import { ElMessage } from "element-plus";
import { ref } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { login } from "../../api/user";
import { validDatePassword, validDateUserName } from "./rule";
const loginFromRef = ref(null);
const store = useStore();
const router = useRouter();
const loginForm = ref({
  userName: "",
  password: "",
});

// 表单验证
const loginRules = ref({
  // 只能初始化改变，在改变语言的时候，不能动态改变问题修复
  userName: [
    { require: true, trigger: "blur", validator: validDateUserName() },
  ],
  password: [
    { require: true, trigger: "blur", validator: validDatePassword() },
  ],
});

// 显示隐藏密码
const passwordType = ref<string>("password");
function changeShow() {
  if (passwordType.value === "password") {
    passwordType.value = "text";
  } else {
    passwordType.value = "password";
  }
}

// 登录
const loading = ref(false);
const goLogin = () => {
  // 表单校验
  loginFromRef.value!.validate(async(valid:any) => {
    if (!valid) return;
    loading.value = true;
    console.log(loginForm.value);
    const res = await login(loginForm.value)
    if(res.code==200) {
      // 触发登录
      loading.value = false;
      store.dispatch('user/asyncSetToken',res.data.token)
      router.push('/')
    } else {
      ElMessage.error(res.message)
      loading.value = false;
    }
  });
}
</script>

<style scoped lang="scss">
.login-container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fmsasmart.com%2FAdmin_System%2FImages%2Flogin_03.jpg&refer=http%3A%2F%2Fmsasmart.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1671002090&t=37844858096a11489cf3770de7123527');
  .title-container {
    position: relative;

    .title {
      font-size: 26px;
      color: #333;
      margin: 0px auto 40px auto;
      text-align: center;
      font-weight: bold;
    }
  }
  .login-btn {
    margin: 10px 0 15px 0;
  }
}
</style>
